<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base/layout::header( ~{::title})">
    <title id="title">项目工时统计</title>
</head>

<body>
<div class="ui main container">
    <div th:replace="base/layout::message"/>

    <input type="hidden" id="errorMsg" name="errorMsg" th:value="${errorMsg}" />
    <div class="ui clearing segment">

        <form action="" id="filterForm" class="ui padded center middle aligned grid form"
              th:object="${filter}" th:method="get">
            <div class="row">
                <div class="four wide column">
                    <div class="pSearch ui search">
                        <div class="ui icon input">
                            <input class="prompt" type="text" id="pId" name="pId" placeholder="项目名"
                                   th:value="${filter.pId}">
                            <i class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                    <!--<div class="pSearch ui fluid search selection dropdown" id="pSearch">
                        <input type="hidden" name="pId">
                        <div class="default text">项目名</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                        </div>
                    </div>-->
                </div>
                <div class="four wide column">
                    <div class="cSearch ui search">
                        <div class="ui icon input">
                            <input class="prompt" type="text" id="cId" name="cId" placeholder="模块名"
                                   th:value="${filter.cId}">
                            <i class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </div>

                <div class="fields" style="margin-top: 12px">
                    <div class="field">
                        <input type="text" placeholder="任务创建日期(From)" id="createDateFromStr" name="createDateFromStr"
                               th:value="${filter.createDateFromStr}"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', maxDate:'#F{$dp.$D(\'createDateToStr\')}'})">
                    </div>
                    <div class="field">

                        <input type="text" placeholder="任务创建日期(To)" id="createDateToStr" name="createDateToStr"
                               th:value="${filter.createDateToStr}"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:'#F{$dp.$D(\'createDateFromStr\')}'})">
                    </div>
                </div>
            </div>

            <div align="center">
                <div class="ui buttons">
                    <button class="ui red button" type="submit"
                            th:href="@{/basicInfo/project}" style="margin-right: 30px">查询
                    </button>
                    <button class="ui white button" type="reset">重置
                    </button>
                </div>
            </div>

            <!--模态框-->
            <div class="ui small modal">
                <i class="close icon"></i>
                <div class="content">
                    确认导出列表？
                </div>
                <div class="actions">
                    <div class="ui cancel button">取消</div>
                    <div class="ui red approve button">确定</div>
                </div>
            </div>
        </form>
    </div>

    <table class="ui selectable celled table">
        <thead>
        <tr>
            <th colspan="3">
                <button class="ui red button"
                        type="button" onclick="confirmExport();">导出
                </button>
            </th>
        </tr>
        <tr>
            <th>项目</th>
            <th>模块</th>
            <th>总工时（小时）</th>
        </tr>
        </thead>
        <tbody th:if="${pageInfo}">
        <tr th:each="header : ${pageInfo.list}">
            <td><a href="#" th:onclick="'queryProjectDetail(\'' + ${header.pId} + '\');'" th:text="${header.pName}"></a>
            </td>
            <td><a href="#" th:onclick="'queryComponentDetail(\'' + ${header.cId} + '\');'"
                   th:text="${header.cName}"></a></td>
            <td th:text="${header.pTotalTimeSpent}"></td>
        </tr>

        </tbody>
    </table>
    <div th:include="base/datatable::pagination" th:remove="tag"></div>
</div>
<div th:replace="common/footer::footer"/>

</body>

<script type="application/javascript">

    // 加载页面之前执行的方法
    $(document).ready(function () {
        var errorMsg = $('#errorMsg').val();
        if (errorMsg) {
            alert(errorMsg);
        }
        console.log(errorMsg);
    });

    //  项目联动查询
    $('.pSearch.ui.search')
        .search({
            apiSettings: {
                url: '/hades/autoComplete/project/{query}'
            },
            fields: {
                results: 'projects',
                title: 'id',
                url: '',
                price: 'pName'
            },
            minCharacters: 1,
            maxResults: 10,
            cache: true,
            error: {
                noResults: '啊噢，没有符合条件的结果哟~',
                serverError: '后台异常.'
            }
        })
    ;

    // 模块联动查询
    $('.cSearch.ui.search')
        .search({
            apiSettings: {
                url: '/hades/autoComplete/component/{query}'
            },
            fields: {
                results: 'components',
                title: 'id',
                url: '',
                price: 'cName'
            },
            minCharacters: 1,
            maxResults: 10,
            cache: true,
            error: {
                noResults: '啊噢，没有符合条件的结果哟~',
                serverError: '后台异常.'
            }
        })
    ;
    /*// 项目联动查询
    $('.pSearch.ui.search.dropdown')
        .dropdown({
            apiSettings: {
                url: '/hades/autoComplete/project/{query}'
            },
            fields: {
                remoteValues: 'projects',
                name: 'pName',
                value: 'id'
            },
            minCharacters: 1,
            message: {
                noResults: '啊噢，没有符合条件的结果哟~'
            }
        })
    ;

    // 模块联动查询
    $('.cSearch.ui.search.dropdown')
        .dropdown({
            apiSettings: {
                url: '/hades/autoComplete/component/{query}'
            },
            fields: {
                remoteValues: 'components',
                name: 'cName',
                value: 'id'
            },
            minCharacters: 1,
            message: {
                noResults: '啊噢，没有符合条件的结果哟~'
            }
        })
    ;*/

    // 查看项目详情
    function queryProjectDetail(pId) {
        window.location.href = "/hades/basicInfo/projectDetail/" + pId;
        window.event.returnValue = false;
    }

    // 查看模块详情
    function queryComponentDetail(cId) {
        window.location.href = "/hades/basicInfo/componentDetail/" + cId;
        window.event.returnValue = false;
    }


    // 导出确认框
    function confirmExport() {
        $('.ui.small.modal')
            .modal('show')
            .modal({
                closable: false,
                onApprove: function () {
                    var pId = $('#pId').val();
                    var cId = $('#cId').val();
                    var createDateFromStr = $('#createDateFromStr').val();
                    var createDateToStr = $('#createDateToStr').val();
                    window.location.href = "/hades/basicInfo/projectListExport?pId=" + pId
                        + "&cId=" + cId + "&createDateFromStr=" + createDateFromStr + "&createDateToStr="
                        + createDateToStr;
                }
            })
        ;
    }


</script>
</html>